<template>
  <el-dialog :model-value="show" title="添加" @close="cancel">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="角色名称：" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="请输入角色名称"
        />
      </el-form-item>
      <el-form-item label="备注：" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :row="4"
          autocomplete="off"
          placeholder="请输入备注"
        />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitFn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { reactive, ref, watch } from "vue";
import { addRoleApi, editRoleApi, getAllRoleApi } from "./api";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
});

const rules = {
  name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
  description: [{ required: false, message: "", trigger: "blur" }],
};
const form = reactive<IRoleModel>({
  adminCount: 0,
  createTime: "",
  description: "",
  id: 0,
  name: "",
  sort: 0,
  status: 0,
});
const formRef = ref<FormInstance>();
const emit = defineEmits(["hide"]);

const cancel = () => {
  emit("hide");
  formRef.value?.resetFields();
};
//点击编辑的时候，父组件传入id则通过这个id发请求，拿到对应信息
watch(
  () => props.id,
  () => {
    if (props.id !== 0) {
      getAllRoleApi().then((res) => {
        if (res.code === 200) {
          res.data.forEach((item) => {
            if (item.id === props.id) {
              // form.name = item.name;
              // form.description = item.description;
              // form.status = item.status;
              // form.id = item.id;
              Object.assign(form, item);
            }
          });
        }
      });
    }
  }
);
const addRole = () => {
  //再去询问
  ElMessageBox.confirm("确定要添加用户吗？", "添加用户", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      //发请求
      addRoleApi(form).then((res) => {
        if (res.code === 200) {
          //提示
          ElMessage.success("添加成功");
          //关闭dialog
          emit("hide", true);
          //刷新数据
          //清空表单
          formRef.value?.resetFields();
        }
      });
    })
    .catch(() => {});
};

const editRole = () => {
  ElMessageBox.confirm("确定要修改当前用户的信息吗？", "修改用户信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      editRoleApi(form).then((res) => {
        if (res.code === 200) {
          //提示
          ElMessage.success("修改成功");
          //清空数据
          formRef.value?.resetFields();
          //隐藏编辑框
          emit("hide", true);
        }
      });
    })
    .catch(() => {});
};

const submitFn = () => {
  //点击提交的时候还要做一次校验
  formRef.value?.validate((ok: Boolean) => {
    if (ok) {
      if (props.id === 0) {
        addRole();
      } else {
        editRole();
      }
    } else {
      //提示
    }
  });
};
</script>
<style lang="less" scoped></style>
